<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>animation_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
<meta name="copyright" content="www.doyoe.com" />
<style>
div{position:absolute;top:50%;left:50%;overflow:hidden;width:300px;height:150px;margin:-75px 0 0 -150px;border:3px solid #eee;background:#e0e0e0;}
span{opacity:0;display:block;height:50px;font:bold 14px/50px Georgia;}
.a1{
	-webkit-transform:translate(60px);
	-webkit-animation:animations 2s ease-out;
	-moz-transform:translate(55px);
	-moz-animation:animations 2s ease-out;
	-o-transform:translate(55px);
	-o-animation:animations 2s ease-out;
	-ms-transform:translate(55px);
	-ms-animation:animations 2s ease-out;
	transform:translate(55px);
	animation:animations 2s ease-out;
}
@-webkit-keyframes animations{
	0%{-webkit-transform:translate(0);opacity:0;}
	50%{-webkit-transform:translate(30px);opacity:1;}
	70%{-webkit-transform:translate(35px);opacity:1;}
	100%{-webkit-transform:translate(60px);opacity:0;}
}
@-moz-keyframes animations{
	0%{-moz-transform:translate(0);opacity:0;}
	50%{-moz-transform:translate(30px);opacity:1;}
	70%{-moz-transform:translate(35px);opacity:1;}
	100%{-moz-transform:translate(60px);opacity:0;}
}
@-o-keyframes animations{
	0%{-o-transform:translate(0);opacity:0;}
	50%{-o-transform:translate(30px);opacity:1;}
	70%{-o-transform:translate(35px);opacity:1;}
	100%{-o-transform:translate(60px);opacity:0;}
}
@-ms-keyframes animations{
	0%{-ms-transform:translate(0);opacity:0;}
	50%{-ms-transform:translate(30px);opacity:1;}
	70%{-ms-transform:translate(35px);opacity:1;}
	100%{-ms-transform:translate(60px);opacity:0;}
}
@keyframes animations{
	0%{transform:translate(0);opacity:0;}
	50%{transform:translate(30px);opacity:1;}
	70%{transform:translate(35px);opacity:1;}
	100%{transform:translate(60px);opacity:0;}
}
.a3{
	-webkit-transform:translate(100px);
	-webkit-animation:animations3 2s ease-out 2s;
	-moz-transform:translate(100px);
	-moz-animation:animations3 2s ease-out 2s;
	-o-transform:translate(100px);
	-o-animation:animations3 2s ease-out 2s;
	-ms-transform:translate(100px);
	-ms-animation:animations3 2s ease-out 2s;
	transform:translate(100px);
	animation:animations3 2s ease-out 2s;
}
@-webkit-keyframes animations3{
	0%{-webkit-transform:translate(160px);opacity:0;}
	50%{-webkit-transform:translate(130px);opacity:1;}
	70%{-webkit-transform:translate(125px);opacity:1;}
	100%{-webkit-transform:translate(100px);opacity:0;}
}
@-moz-keyframes animations3{
	0%{-moz-transform:translate(160px);opacity:0;}
	50%{-moz-transform:translate(130px);opacity:1;}
	70%{-moz-transform:translate(125px);opacity:1;}
	100%{-moz-transform:translate(100px);opacity:0;}
}
@-o-keyframes animations3{
	0%{-o-transform:translate(160px);opacity:0;}
	50%{-o-transform:translate(130px);opacity:1;}
	70%{-o-transform:translate(125px);opacity:1;}
	100%{-o-transform:translate(100px);opacity:0;}
}
@-ms-keyframes animations3{
	0%{-ms-transform:translate(160px);opacity:0;}
	50%{-ms-transform:translate(130px);opacity:1;}
	70%{-ms-transform:translate(125px);opacity:1;}
	100%{-ms-transform:translate(100px);opacity:0;}
}
@keyframes animations3{
	0%{transform:translate(160px);opacity:0;}
	50%{transform:translate(130px);opacity:1;}
	70%{transform:translate(125px);opacity:1;}
	100%{transform:translate(100px);opacity:0;}
}
.a2{
	text-align:center;font-size:26px;
	-webkit-animation:animations2 5s ease-in-out 4s;
	-moz-animation:animations2 5s ease-in-out 4s;
	-o-animation:animations2 5s ease-in-out 4s;
	-ms-animation:animations2 5s ease-in-out 4s;
	animation:animations2 5s ease-in-out 4s;
}
@-webkit-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-moz-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-o-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@-ms-keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
@keyframes animations2{
	0%{opacity:0;}
	40%{opacity:.8;}
	45%{opacity:.3;}
	50%{opacity:.8;}
	55%{opacity:.3;}
	60%{opacity:.8;}
	100%{opacity:0;}
}
</style>
</head>
<body>
<div>
	<span class="a1">CSS3 Animations</span>
	<span class="a2">CSS3 Animations</span>
	<span class="a3">CSS3 Animations</span>
</div>
</body>
</html>
			